import { AtFloatLayout, AtList, AtListItem, AtTabs, AtTabsPane } from "taro-ui";
import {
  View,
  PickerView,
  PickerViewColumn,
  ScrollView,
} from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import Req from "../../utils/request";
import "./index.scss";
import { useEffect, useState } from "react";
import { isEmpty } from "../../utils/kit";
interface IProps {
  visible: boolean;
  onClose: (open:boolean) => void;
  onSelect: (v:any,tabList:any[]) => void;
}
export default function CascadeSelect({ visible, onSelect,onClose }: IProps) {
  const [tabList, setTabList] = useState([
    {
      title: "请选择",
      id: null,
      children: [],
    },
  ]);
  const [current, setCurrent] = useState(0);
  useLoad(() => {
    Req.get("/config/sector/list").then((r) => {
      if (r.code === 200) {
        tabList[0].children = r.rows;
        setTabList([...tabList]);
      }
    });
  });

  const onClick = (v) => {
    setCurrent(v);
  };

  useEffect(() => {
    const lastTab = tabList[tabList.length - 1];
    if (
      tabList.length > 1 &&
      lastTab.title === "请选择" &&
      lastTab.children.length === 0 &&
      isEmpty(lastTab.id)
    ) {
      Req.get("/config/sector/list", {
        parentId: tabList[tabList.length - 2].id,
      }).then((r) => {
        tabList[tabList.length - 1].children = r.rows;
        setTabList([...tabList]);
      });
    }
  }, [tabList]);

  const onItemSelect = (e) => {
    if (e.nextNum === 0) {
      onSelect(e,tabList);
      return;
    }
    if (tabList.length - current > 1) {
      tabList[current].title = e.name;
      tabList[current].id = e.id;
      setTabList([
        ...tabList.slice(0, current + 1),
        {
          title: "请选择",
          id: null,
          children: [],
        },
      ]);
      setCurrent(current + 1);
    } else {
      tabList[tabList.length - 1].title = e.name;
      tabList[tabList.length - 1].id = e.id;
      setTabList([
        ...tabList,
        {
          title: "请选择",
          id: null,
          children: [],
        },
      ]);
      setCurrent(tabList.length);
    }
  };
  return (
    <AtFloatLayout isOpened={visible}
        onClose={(e) => {
            onClose(false);
        }}
    >
      <View className="cs-contaienr">
        <AtTabs scroll onClick={onClick} current={current} tabList={tabList}>
          {tabList.map((item, index) => (
            <AtTabsPane index={index} current={current}>
              <ScrollView
                style={{
                  height: "300px",
                }}
                scrollY
              >
                <AtList>
                  {item.children.map((e:any, i) => (
                    <AtListItem
                      key={i}
                      onClick={() => {
                        onItemSelect(e);
                      }}
                      title={e.name}
                    ></AtListItem>
                  ))}
                </AtList>
              </ScrollView>
            </AtTabsPane>
          ))}
        </AtTabs>
      </View>
    </AtFloatLayout>
  );
}
